$(function () {
    // 切换图标
    $('.icons').on('click', function () {
        // 显示一大丢图标
        $('.icons-contain').toggle();
    });
    // 点击大图标里面的某一个小图标 实现切换
    $('.icons-inner>.fa').on('click', function () {
        // 把点击的图标切换到外面的图标 把当前图标的类名赋值给外面的图标
        let classname = $(this).attr('class');
        $(".icons>.fa").attr('class', classname);
        // 还要把隐藏域里面的value改变
        $('#classname').val(classname.substring(3));
    })
    // 给添加按钮注册点击事件
    $('#btn-add').on('click', function () {
        // 验证非空
        // 获取表单域里面的内容
        // let getname = $('#name').serialize();
        // let getslug = $('#slug').serialize();
        let data = $('#form').serialize();
        // if(data=''){
        //     $('#modelId').modal();
        //     $('.container-fluid').text('名称或者别名不能为空');
        // // }
        // console.log(data)
        // 发送 ajax请求
        $.post('/addNewCategory', data, (res) => {
            if (res.code == 200) {
                 // 弹框提示
                $('#modelId').modal();
                $('.modal-body>.container-fluid').text('添加成功');              
                // 动态生成新的数据
                let html = template('tp', res.data)
                console.log(res,res.data)
                // 把数据动态添加到tbody
                $('tbody').append(html);
                  // 清空表单
                $('#name').val('');
                $('#slug').val('');
                $(".icons>.fa").attr('class', 'fa fa-glass');
            }
        })
    })




    // 暂时存储删除的数据
    let delId = null;
    let delTr = null;
    // 给删除按钮注册点击事件-要使用委托的方式
    $('tbody').on('click', '.btn-danger', function () {
        //把需要共享的给确认框的数据放到外部
        delTr = $(this).parents('tr');
        delId = delTr.attr('data-id');

        // ??????????????????????

        // console.log(delId);
        // console.log(delTr);
        $("#modelId2").modal();
    })
    // .弹出一个确认框，点击确认之后，把请求给服务器
    $('#btn-sure2').on('click', function () {
            $.get('/deleteCategoryById', { id: delId }, function (res) {
                if (res.code == 200) {
                    // 把tr删除
                    delTr.remove();
                    // 把模态框隐藏
                    $("#modelId2").modal('hide');
                }
            })
    })
    // 给所有的编辑按钮注册点击事件
    $('tbody').on('click', '.btn-info', function () {
        let id = $(this).parents('tr').attr('data-id');
        console.log(id)
        // 获取最新的数据
        // 传送到服务器

        $.get('/getCategoryById', { id }, (res) => {
            console.log(res)
            if (res.code == 200) {
                // 把数据写入表单里面
                $('#name').val(res.data.name);
                $('#slug').val(res.data.slug);
                // 修改图标
                $('.icons>.fa').attr('class', 'fa' + res.data.classname);
                // 处理图标的隐藏域
                $('#classname').val(res.data.classname);
                // 动态的生成一个隐藏域放在表单里面
                let form = $('#form');
                let first = form.children('input').eq(0);
                if (first.attr('type') === 'hidden') {
                    // 如果是 就不用在重新生成了  直接修改
                    first.val(res.data.id);
                } else {
                    // 如果不是 就重新生成、
                    let idInput = $('<input type = "hidden" name = "id" value="' + res.data.id + '">');
                    form.prepend(id)
                    // 把添加的按钮隐藏  保存和取消显示
                    $('#btn-add').parent().attr('hidden', 'true');
                    $('#btn-save').parent().removeAttr('hidden');
                }
            }
        })

    })
    // 点击保存、
    $('#btn-save').on('click', function () {
        // 非空验证

        // 手机数据
        let data = $('#form').serialize();
        $.post('/editCategoryById', data, (res) => {
            console.log(res);

        })
    })
    // 点击取消
    $('#btn-cancel').on('click', () => {
        // 把表单域里面的每个输入框清空
        $('#name').val('')
        $('#slug').val('');
        // 把图标恢复默认 以及把图标的隐藏域也恢复默认

    })
    // 全选和全不选
    $("thead input[type=checkbox]").on('click', function () {
        // 得到当前自己是否选中状态
        let status = $(this).prop('checked');
        // 把下面的每一个都和我一样
        $('tbody input[type = checkbox]').prop('checked', status);
        // 把批量删除显示
        status ? delBtn.show() : delBtn.hide();

    })
    let delBtn = $('.page-action > .btn-danger');
    // 点选
    $('tbody').on('click','input[type=checkbox]', function () {
        // 判断是否全选
        // 选中的个数和所有的个数一致就代表选中了
        // 获取所有的CheckBox
        let all = $('tbody input[type=checkbox]');
        // 获取选中的checkbox
        let checked = $('tbody input[type=checkbox]:checked');
        let isCheckAll = all.length === checked.length;
        $("thead input[type=checkbox]").prop('checked', isCheckAll);
        // 当勾选的个数大于 1 把批量删除按钮显示
        checked.length>1 ? delBtn.show() : delBtn.hide();

    })
    // 批量删除
    $('.page-action>.btn-danger').on('click', function () {
        // 获取勾选的id
        let checked = $('tbody input[type=checkbox]:checked');
        let ids = [];
        checked.each(function (index, ele) {
            let id = $(ele).parents('tr').attr('data-id');
            ids.push(id);
        })
        // console.log(ids);
        $.get('/deletemultiple', {ids}, (res) => {
            console.log(res)
        })
    })
})